<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">   
   
    <link rel="stylesheet" type="text/css" href="css/lui.css" />
    <!--富文本样式-->
    <link rel="stylesheet" type="text/css" href="css/lib/fixck.css" />

  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body class="bg_white">
    <div class="ui_page_wrap">
        <div class="ui_page_bd">
            <div class="ui_article_detail">
                <h1 class="ui_article_title">关于LUI</h1>
                <div class="">
                    <span class="ui_article_time">2018-04-15</span>
                    <span class="ui_article_name">smallsea</span>
                </div>
                <div id="j-content" class="ui_article_content fixck">
                    <h4>LUI，L即light的缩写，是一套原生驱动的轻量级移动端UI组件库。</h4>
                    <section class="wx96Diy cur" data-source="bj.96weixin.com"><br>
                        <section style="padding-left: 10px;padding-right: 10px; white-space: normal; text-align: inherit; border: 1px solid rgb(0, 187, 236); font-size: 1em; font-family: inherit; font-weight: inherit; text-decoration: inherit; color: rgb(51, 51, 51); background-color: rgb(239, 239, 239, 0); box-sizing: border-box;" class="96wx-bdc"><section style="margin: -1em 16px 0px; padding: 0px; border: none; line-height: 1.4; box-sizing: border-box;" class="96wx-bdtc"><span style="display: inline-block; padding: 3px 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; color: rgb(255, 255, 255); font-size: 1em; text-align: center; font-family: inherit; font-weight: inherit; text-decoration: inherit; background-color: rgb(0, 187, 236); border-color: rgb(0, 187, 236); box-sizing: border-box;" class="96wx-bgc"><section class="96wx-bdtc" style="box-sizing: border-box;">了解LUI</section></span></section>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;​1、轻量，未压缩的核心css不超过35kb，未压缩的核心js未超过35kb。基于原生能力，专注于UI的同时，又提供了一些实用的js组件。LUI可直接在浏览器运行(首页index.html因为是通过请求加载json数据，需要启动一个本地服务打开。当然，如果你的浏览器是firefox，可直接打开页面。)，不需要构建环境和安装依赖包，没有技术限制，能与其他框架一同使用。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;2、适用于绝大部分移动端项目，更增加了移动办公场景组件（如签名，水印，流程流转）。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;3、css因为不具备动态语言的特性，容易造成命名冲突，本框架大部分class携带"ui"前缀，大大减少了样式冲突问题。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;4、核心js设计使用闭包，避免了污染，对外暴露唯一的一个变量lui,因此不必担心与其他框架造成冲突。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;5、引用了一款精致小巧的laytpl作为模版引擎。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;6、并不是闭门造车，而是吸收借鉴了一些优秀前端框架。如AUI，WeUI，SUI，Mint UI。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;7、基于大量项目经验，注重性能，并规避了一些隐性bug，比如出现多个弹窗的bug，多个loading的bug。</p>
                       </section></section>
                    <section class="wx96Diy" data-source="bj.96weixin.com"><br><br>
                     <section style="padding: 0px; white-space: normal; text-align: inherit; border: 1px solid rgb(0, 187, 236); font-size: 1em; font-family: inherit; font-weight: inherit; text-decoration: inherit; color: rgb(51, 51, 51); background-color: rgb(239, 239, 239, 0); box-sizing: border-box;" class="96wx-bdc"><section style="margin: -1em 16px 0px; padding: 0px; border: none; line-height: 1.4; box-sizing: border-box;" class="96wx-bdtc"><span style="display: inline-block; padding: 3px 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; color: rgb(255, 255, 255); font-size: 1em; text-align: center; font-family: inherit; font-weight: inherit; text-decoration: inherit; background-color: rgb(0, 187, 236); border-color: rgb(0, 187, 236); box-sizing: border-box;" class="96wx-bgc"><section class="96wx-bdtc" style="box-sizing: border-box;">为什么使用UI框架？</section></span></section><p>&nbsp;&nbsp;&nbsp;&nbsp;​1、标准化，产品化<br></p><p>&nbsp;&nbsp;&nbsp;&nbsp;​2、更多复用，更快效率</p><p>&nbsp;&nbsp;&nbsp;&nbsp;​3、多人协作，更加统一</p><p>&nbsp;&nbsp;&nbsp;&nbsp;​4、维护方便<br></p><p>&nbsp;&nbsp;&nbsp;&nbsp;​5、易于使用<br></p><p>&nbsp;&nbsp;&nbsp;&nbsp;​6、减少UI设计时间<br></p><p><br></p></section></section>
                    <br>
                    <h3>目录结构</h3>
                    <img id="coverImage" src="images/folders.png">
                    <h3>联系</h3>
                    <p><label>QQ邮箱：</label><span>793227551@qq.com</span></p>
                    <p><label>WeChat：</label><span>hxh793227551</span></p>                  
                </div> 
                <div class="ui_article_foot">
                    <span class="c888">阅读(99+)</span>
                </div>
            </div>
        </div>
    </div>

<!-- 图片预览css和js -->
<link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.3/viewer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.3/viewer.min.js"></script>
<script type="text/javascript">
    //图片预览
    var viewer = new Viewer(document.getElementById('j-content'), {
      url: 'src'
    });
</script>
</body>
</html>